<template>
  <div class="dmform dmform-right" v-loading="loading">
    <Tabs default-active-key="1" tabPosition="left" :animated="false" :style="{height: pageHeight+'px'}">
      <TabPane label="基本信息">
        <div class="dmform-groups" :style="{maxHeight:pageHeight-50+'px'}" style="padding-top: 10px;">
          <a-form-model ref="form" :model="formData" :rules="formRules" :label-col="formLabelCol" :wrapper-col="formWrapperCol">
            <div class="dmform-group">
              <a-form-model-item prop="name" has-feedback label="公司名称" help="建议填写工商登记注册的企业全称。">
                <a-input v-model="formData.name" v-focus />
              </a-form-model-item>
              <a-form-model-item prop="contactUser" has-feedback label="联系人" help="建议填写企业指派负责该系统的管理员姓名。">
                <a-input v-model="formData.contactUser" />
              </a-form-model-item>
              <a-form-model-item prop="contactTel" has-feedback label="手机号码" help="联系人的手机号码。">
                <a-input v-model="formData.contactTel" />
              </a-form-model-item>
              <a-form-model-item label="公司地址" help="企业详细地址，格式：XX 省(市) XX 市(州) XX 区(县)。">
                <a-textarea v-model="formData.address" :maxLength="256" />
              </a-form-model-item>
            </div>
            <div class="dmform-group-title">系统账户</div>
            <div class="dmform-group">
              <a-form-model-item prop="systemName" label="系统名称" help="企业个性化的系统名称，将显示在登录页面和主页面。">
                <a-input v-model="formData.systemName" />
              </a-form-model-item>
              <a-form-model-item label="访问地址" help="不同企业登录系统时，系统访问地址是不一样的。">
                <a v-if="visitUrl" :href="visitUrl" target="_blank" style="font-size: 16px;">{{visitUrl}}</a>
                <a-input v-else value="保存成功后自动生成！" disabled />
              </a-form-model-item>
              <a-form-model-item label="登录账号" help="企业管理员登录系统时，必须输入登录账号，登录账号默认为：T+手机号码。">
                <a-input :value="formData.username" disabled />
              </a-form-model-item>
              <a-form-model-item label="登录密码" help="企业管理员登录系统时，必须输入登录密码，初始密码：P+手机号码。">
                <a-input-password :value="formData.password" disabled>
                  <a-button slot="addonAfter" type="link" size="small" @click="doResetPwd">重置密码</a-button>
                </a-input-password>
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
        <div class="dmform-bottom">
          <a-button @click="doSubmit" type="primary" :loading="submitting">{{ saveButtonText }}</a-button>
        </div>
      </TabPane>
      <TabPane label="权限设置" :disabled="!pageParams.id">
        <div class="dmform-groups" style="padding-top: 10px;" :style="{maxHeight:pageHeight+'px'}">
          <div class="dmform-group" style="padding: 10px; margin-bottom: 10px;">
            <a-form-model-item help="1、企业所拥有的角色，决定了企业可以使用的功能？2、企业管理员为员工授权时，只能从企业所拥有的角色中选择。">
              <TreeTransfer
                  left-data-url="/jsofted/role/tree"
                  right-add-url="/jsofted/tenantRole/add"
                  right-delete-url="/jsofted/tenantRole/deleteBy"
                  leftField="tenantId"
                  rightField="roleId"
                  :leftValue="pageParams.id"
                  left-title="可以选择的角色"
                  right-title="企业拥有的角色"
              >
              </TreeTransfer>
            </a-form-model-item>
          </div>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import {Tabs,TabPane} from 'element-ui'
import DataFormUtils from '@/utils/DataFormUtils'

export default {
  components: { Tabs, TabPane },
  mixins: [DataFormUtils],
  data() {
    return {
      loadUrl: '/jsofted/tenant/get/',
      addUrl: '/jsofted/tenant/add',
      updateUrl: '/jsofted/tenant/update/',
      formData: {
        id: '',
        name: '',
        contactUser: '',
        contactTel: '',
        address: '',
        systemName: '',
        username: '',
        password: '',
        roleTypes: {},
        statusCode: '1',
      },
      password: '',
      formRules: {
        name: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { min: 4, max: 30, message: '长度为4-30个字！', trigger: 'change' },
        ],
        contactUser: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { min: 2, max: 8, message: '长度为2-8个字！', trigger: 'change' },
        ],
        contactTel: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { pattern: '^1[3|4|5|7|8][0-9]{9}$', message: '电话号码格式不正确！', trigger: 'change' },
        ],
      },
    }
  },
  computed: {
    visitUrl() {
      if (this.pageParams.id) {
        return window.location.host + '/' + this.pageParams.id
      } else {
        return ''
      }
    },
  },
  watch: {
    'formData.contactTel': function(v) {
      this.formData.username = v ? ('T' + v) : ''
      if (!this.password) {
        this.formData.password = v ? ('P' + v) : ''
      }
    }
  },
  methods: {
    initFormData(obj) {
      obj = obj || {}
      this.formData.id = obj.id || ''
      this.formData.name = obj.name || ''
      this.formData.contactUser = obj.contactUser || ''
      this.formData.contactTel = obj.contactTel || ''
      this.formData.address = obj.address || ''
      this.formData.systemName = obj.systemName || ''
      this.formData.username = obj.username || ''
      this.formData.password = obj.password || ''
      this.formData.roleTypes = obj.roleTypes || {}
      this.formData.statusCode = obj.statusCode || '1'
      //
      this.password = obj.password || ''
    },
    doResetPwd() {
      this.password = ''
      this.formData.password = this.formData.contactTel ? ('P' + this.formData.contactTel) : ''
    },
  }
}
</script>
